<template>
  <Panel title="添加账号">
    <!-- <span slot="text">添加账号</span> -->

    <div slot="content">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 账号 -->
        <el-form-item label="账号" prop="account">
          <el-input
            type="text"
            v-model="ruleForm.account"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 用户组 -->
        <el-form-item label="用户组" prop="userGroup">
          <el-select v-model="ruleForm.userGroup" placeholder="请选择用户组">
            <el-option label="普通会员" value="普通会员"></el-option>
            <el-option label="高级会员" value="高级会员"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addAcc"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </Panel>
</template>

<script>
import Panel from "@/components/Panel.vue";

import {checkAcc,checkPass} from '@/utils/validate.js'
// console.log(checkPass);

import {accRepeatAdd, accRepeat} from '@/api/user'


export default {
  components: {
    Panel,
  },
  data() {

     // 用户名
    var validateAcc = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号'));
        } else if(!checkAcc(value)) {
            callback(new Error('账号格式不正确'));
        }else{
          accRepeat({
            account:value
          }).then(res=>{
            let {code,msg}=res.data
            console.log(res.data);
            if(code==200){

              callback()
            }else{
               callback(new Error(msg))
            } 
          })

          callback()
        }
      };

    // 密码
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (!checkPass(value)) {
            callback(new Error('密码格式不正确'));
          }
          callback();
        }
      };
   
    return {
        formInline:{},
      ruleForm: {
        account: "",
        password: "",
        userGroup: "",
      },
      rules: {
        account: [{ validator: validateAcc, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        userGroup: [{ required:true,message:'你没有选分组', trigger: "change" }],
      },
    };
    


  },
  methods: {
    addAcc() {
     
        this.$refs['ruleForm'].validate(async(valid) => {
          if (valid) {
            // alert('可以发ajax请求');
            let res=await accRepeatAdd(this.ruleForm);
            console.log(this.ruleForm);
            console.log(res.data);
            let {code,msg}=res.data

            if(code==0){
              // this.$message.success(msg)
              this.$router.push('/account/accountlist')
            }else{
              this.$message.success(msg)
            }

            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();

      }
  },
};
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
}
.clearfix:after {
  clear: both;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box-card {
  width: 100%;
}
.el-input {
  width: 200px;
}
</style>